<template>
  <div class="beauty">
      <div class="find_top">
        
        <Settingheader  :titletext="out" :backpage="ao"></Settingheader>
      </div>
      

      <div class="zt">
        <div class="demo">
            <div class="centre">
                    <h1>最美达人</h1>
                    <p>TOP50</p>
            </div>
            <img src="../../../images/IMG_bianmeixue_02.png" alt="">
        </div>
        
        <div class="content">
                <div class="portrait"><img src="../../../images/IMG_BANNER_3.png" alt=""></div>
                <span>关注ta</span><h1>悦小舞</h1>
                <div class="main">
                    <img src="../../../images/IMG_zuimei_03.png" alt="">
                    <img src="../../../images/IMG_zuimei_04.png" alt="">
                </div>
        </div>
       </div>
      <div class="zt">
        <div class="demo">
            <div class="centre">
                    <h1>最美达人</h1>
                    <p>TOP50</p>
            </div>
            <img src="../../../images/IMG_bianmeixue_02.png" alt="">
        </div>
        
        <div class="content">
                <div class="portrait"><img src="../../../images/IMG_BANNER_3.png" alt=""></div>
                <span>关注ta</span><h1>悦小舞</h1>
                <div class="main">
                    <img src="../../../images/IMG_zuimei_03.png" alt="">
                    <img src="../../../images/IMG_zuimei_04.png" alt="">
                </div>
        </div>
       </div>

       

  </div>
</template>
<script>
    import Settingheader from "../../../components/settingheader"
    export default {
    name:'Beauty',
    data(){
        return{
            out:"最美达人",
            ao:"/find"
        }
    },
    components:{
        Settingheader
        }
    }
</script>
<style lang="less" scoped>
.beauty{
    background:#fff;
}
.find_top{
  width:100%;
  text-align: center;
  height:306/75rem;
  background:#ff406f;
  margin-bottom:240/75rem;
    h1{
      color:#fff;
      font-size:40/75rem;
      padding-top:36/75rem;
    }

    .seek{
        position:absolute;
    //   float:left;
      margin-left:20/75rem;
      padding-top:20/75rem;
      
    }
}
 .centre{
     position: absolute;
     width: 230/75rem;
     left:0;
     right:0;
     top:0;
     bottom: 0;
     margin: auto auto;
     height: 128/75rem;
     background: #fff;
     text-align: center;

     h1{
         font-size: 30/75rem;
         padding-top: 24/75rem;
         color: #ff406f;
     }
     p{
         font-size: 28/75rem;
         padding-top: 14/75rem;
         color: #ff406f;
     }
     
 }

 .zt{
     margin-bottom:30/75rem;
 }
.demo{
  position:absolute;
  width:714/75rem;
  height:338/75rem;
  // border:solid 1px black; 
  border-radius:16/75rem;
  box-shadow: 0 0 20px #888888;
  background:#fff;
  top:168/75rem;
  left:0;
  right:0;
  margin: 0 auto;
  overflow:hidden;
 img{
     width: 100%;
 }

}
.content{
    position:relative;
    width: 714/75rem;
    height: 490/75rem;
    border-radius:16/75rem;    
    box-shadow: 0 0 20/75rem #888888;
    margin: 0 auto;
    
    .portrait{
        position:absolute;
        top:-20/75rem;
        left:16/75rem;
    }

    h1{
        font-size:26/75rem;
        padding-left:128/75rem;
        padding-top:30/75rem;
    }

    span{
        float:right;
        font-size:16/75rem;
        display:block;
        padding:8/75rem 20/75rem;
        // width:94/75rem;
        // height:34/75rem;
        border-radius:16/75rem;
        border:solid 1/75rem black;
        margin-top:20/75rem;
        margin-right:30/75rem;
    }

    .main{
        width:654/75rem;
        height:356/75rem;
        margin: 40/75rem auto;
        // background:red;

        img{
            width:316/75rem;
            height:356/75rem;
        }
        
    }

}
</style>
